<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">班费管理</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>


    <el-divider></el-divider>
    <el-radio-group v-model="size" style="margin-top: 30px;margin-bottom: 30px;">
      <el-radio label="">默认</el-radio>
      <el-radio label="medium">中等</el-radio>
      <el-radio label="small">小型</el-radio>
      <el-radio label="mini">超小</el-radio>
    </el-radio-group>

    <el-descriptions class="margin-top" title="我的信息" :column="2" :size="size" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="handleEdit()">修改</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户id
        </template>
        {{user.id}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户账号
        </template>
        {{user.username}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          姓名
        </template>
        {{user.nickname}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-postcard"></i>
          班级名称
        </template>
        {{user.className}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          余额
        </template>
        {{user.money}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{user.phone}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          邮箱
        </template>
        <el-tag size="small">{{user.email}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          余额
        </template>
        {{user.money}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          是否启用
        </template>
        <div v-model="user.enable"></div>
        {{enable[user.enable]}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          角色
        </template>
        <el-tag size="small" v-for="(item,index) in user.roleName">{{item}}</el-tag>

      </el-descriptions-item>

    </el-descriptions>

  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      size: '',
      ruleForm:{},
      user:'',
      enable:['否','是'],
    };
  },
  methods: {

    handleEdit(){
      location.href='/user/upDataInfo?id='+this.user.id;
    },

    //加载用户信息
    loadUserStandard() {
      let username = localStorage.getItem('username');
      console.log("用户的username:" + username);
      //根据id查询用户信息
      let url = 'http://localhost:8080/user/getByName?username=' + username;
      console.log("url:" + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.ruleForm = responseBody.data;
        console.log(this.ruleForm);
        this.user=this.ruleForm[0];
      });
    },
  },

  mounted(){
    this.loadUserStandard();
  }
}
</script>
